<template>
  <!-- 商品统计 -->
  <div class="dashboard">
    <el-row :gutter="10" class="show-count">
      <template v-for="item in amountlist" :key="item.title">
        <el-col :md="12" :lg="6" :xl="6">
          <goods-panel :panelInfo="item"></goods-panel>
        </el-col>
      </template>
    </el-row>
    <div class="show-echarts">
      <el-row :gutter="10" class="rowstyle">
        <el-col :span="7">
          <fh-card title="分类商品数量(饼图)">
            <pieEcharts :pieData="categoryGoodsCount"></pieEcharts>
          </fh-card>
        </el-col>
        <el-col :span="10">
          <fh-card title="不同城市商品销量">
            <mapEcharts :mapData="addressGoodsSale"></mapEcharts>
          </fh-card>
        </el-col>
        <el-col :span="7">
          <fh-card title="分类商品数量(玫瑰图)">
            <roseEcharts :roseData="categoryGoodsCount"></roseEcharts>
          </fh-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="content-row">
        <el-col :span="12">
          <fh-card title="分类商品的销量">
            <lineEcharts v-bind="categoryGoodsSale"></lineEcharts>
          </fh-card>
        </el-col>
        <el-col :span="12">
          <fh-card title="分类商品的收藏">
            <barEcharts v-bind="categoryGoodsFavor"></barEcharts>
          </fh-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from '@/store'
import FhCard from '@/base-ui/card'
import {
  pieEcharts,
  roseEcharts,
  lineEcharts,
  barEcharts,
  mapEcharts
} from '@/components/echarts-page'

export default defineComponent({
  name: 'dashboard',
  components: {
    FhCard,
    pieEcharts,
    roseEcharts,
    lineEcharts,
    barEcharts,
    mapEcharts
  },
  setup() {
    const store = useStore()
    // 请求数据
    store.dispatch('dashboard/getdashboardDataAction')
    // 获取数据
    const amountlist = computed(() => store.state.dashboard.amountlist)

    const categoryGoodsCount = computed(() => {
      return store.state.dashboard.categoryGoodsCount.map((item) => {
        return {
          name: item.name,
          value: item.goodsCount
        }
      })
    })

    const categoryGoodsSale = computed(() => {
      const xLabels: string[] = []
      const values: any[] = []
      const categoryGoodsSale = store.state.dashboard.categoryGoodsSale
      for (const item of categoryGoodsSale) {
        xLabels.push(item.name)
        values.push(item.goodsCount)
      }
      // 直接使用v-bind进行绑定
      return {
        xLabels,
        values
      }
    })
    const categoryGoodsFavor = computed(() => {
      const xLabels: string[] = []
      const values: any[] = []
      const categoryGoodsFavor = store.state.dashboard.categoryGoodsFavor
      for (const item of categoryGoodsFavor) {
        xLabels.push(item.name)
        values.push(item.goodsFavor)
      }

      // 直接使用v-bind进行绑定
      return {
        xLabels,
        values
      }
    })
    const addressGoodsSale = computed(() => {
      return store.state.dashboard.addressGoodsSale.map((item) => {
        return {
          name: item.address,
          value: item.count
        }
      })
    })

    return {
      categoryGoodsCount,
      categoryGoodsSale,
      categoryGoodsFavor,
      addressGoodsSale,
      amountlist
    }
  }
})
</script>

<style scoped lang="less">
.dashboard {
  .show-count {
    width: 100%;
  }
  .show-echarts {
    width: 100%;
    overflow-x: hidden;
    .content-row {
      margin-top: 20px;
    }
  }
}
</style>
